<template>
  <view class="safe-area-inset-bottom">
    <view class="swip_header">
            <view class="num_header">
              <span> {{ countInfo.orderNum }} </span> 个有效签署套餐
<!--              <span> {{ countInfo.soonExpiringNum }} </span> 个即将到期，-->
<!--              <span> {{ countInfo.remainingNum }} </span> 次剩余签署量。-->
            </view>
      <view class="slot-box">
        <view style="width: 100%;">
          <uni-search-bar
              v-model="queryParams.params.findApi"
              type="text"
              @confirm="handleQuery"
              @input="handleQuery"
              placeholder="请输入签署套餐名称或编号"/>
        </view>
      </view>
    </view>

    <!-- 签署流浪包 -->
    <view v-if="!!dataList && dataList.length > 0" class="tabs cardList">
      <uni-card :is-shadow="false" v-for="(item,index) in dataList" :key="index" @click="detail(item)">
        <view class="flex_between">
          <span class="grid-integral">签署套餐名称：{{ item.signFlowFeeName }}</span>
          <!-- 套餐状态 -->
          <template v-for="(dictItem, index) in dicts.ec_sign_order_status">
            <template v-if="item.status == dictItem.value">
              <uni-tag :text="dictItem.text" :type="dictItem.type"/>
            </template>
          </template>
        </view>
        <p class="grid-integral">签署套餐编号：{{ item.number }}</p>
        <p class="grid-integral">签署套餐总量：{{ item.signCountNum }}次</p>
        <p class="grid-integral">签署剩余总量：{{ item.remainingNum }}次</p>
        <p class="grid-integral">套餐过期时间：{{ item.expirationTime }}</p>
		<p class="grid-integral">套餐支付时间：{{ item.createTime }}</p>
		<p class="grid-integral">支付状态：
          <template v-for="(dictItem, index) in dicts.ec_sign_order_pay_status">
            <template v-if="item.payStatus == dictItem.value">
              <uni-tag :text="dictItem.text" size="small" :type="dictItem.type"/>
            </template>
          </template>
		</p>
      </uni-card>
      <!-- 加载更多 -->
      <uni-load-more color="#00a660" :status="loadStatus"/>
    </view>
    <!-- 暂无数据 -->
    <luanqingEmpty :show="true" text="没有更多数据啦" v-else/>
  </view>
</template>

<script>
import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
import {getCountInfo, listFlowFeeOrder} from "@/api/ec/person/fee/signFlowFeeOrder";
import {getDictsByNameForUni} from "../../../utils/dicts";

export default {
  components: {
    luanqingEmpty
  },
  data() {
    return {
      // 数据字典 
      dicts: {
        // 套餐状态
        ec_sign_order_status: [],
        // 支付状态
        ec_sign_order_pay_status: [],
      },
      // 加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      loadStatus: 'loading',
      // 数据列表
      dataList: [],
      //总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        number: undefined,
        payType: undefined,
        cpType: undefined,
        status: undefined,
        signFlowFeeName: undefined,
        params: {
          findApi: undefined
        }
      },
      // 流量包统计
      countInfo: {},
    }
  },
  onLoad() {
    this.getDicts();
  },
  created() {
    this.getList();
    this.getCountInfo();
  },
  /** 上拉刷新回调 */
  onReachBottom() {
    if (this.loadStatus != 'noMore' && this.total > this.dataList.length) {
      this.loadStatus = 'loading';
      // 延迟500毫秒显示loading效果
      setTimeout(() => {
        // 执行查询的方法
        this.getList(false);
      }, 500)
    } else {
      // 停止加载
      this.loadStatus = 'noMore'
    }
  },
  methods: {
    // ===============================================================================================================
    // ==== 加载数据字典
    // ===============================================================================================================
    /**加载数据字典*/
    getDicts() {
      // 套餐状态
      this.dicts.ec_sign_order_status = getDictsByNameForUni("ec_sign_order_status");
      // 支付状态
      this.dicts.ec_sign_order_pay_status = getDictsByNameForUni("ec_sign_order_pay_status");
    },
    /** 查询签署流量包订单列表 */
    getCountInfo() {
      getCountInfo().then(response => {
        this.countInfo = response.data;
      });
    },
    /** 搜索 */
    handleQuery() {
      this.getList(true);
    },
    /**
     * 查询数据列表
     * @param reload true 重新加载数据； false 加载更多
     */
    getList(reload) {
      if (reload) {
        this.queryParams.pageNum = 1;
        this.loadStatus = 'more'
        this.$modal.loading();
      }
      listFlowFeeOrder(this.queryParams).then(response => {
        if (reload) {
          uni.hideLoading()
        }
        this.total = response.total;
        if (response.total > 0) {
          const dataRows = response.rows;
          this.dataList = reload ? dataRows : this.dataList.concat(dataRows);
        } else {
          this.dataList = [];
        }
        // 判断数据是否加载完全
        if (response.total <= this.dataList.length) {
          this.loadStatus = 'noMore'
        }
        // 页数+1
        this.queryParams.pageNum++
      }).catch(() => {
        if (reload) {
          uni.hideLoading()
        }
      });
    },
    /** 查看详情 */
    detail(item) {
      uni.navigateTo({
        url: './detail?dataDetails=' + JSON.stringify(item)
      })
    },
  }
}
</script>

<style scoped lang="scss">
	::v-deep .cardList .uni-card .uni-card__content{
		padding: 20rpx 0 !important;
	}
.tabs {
  margin-top: calc(192rpx + constant(safe-area-inset-top));
  margin-top: calc(192rpx + env(safe-area-inset-top));
  margin-top: 192rpx;
}

.num_header {
  background-color: #f5f6f7;
  padding: 10rpx 0;
  color: #999999;
  text-align: center;

  span {
    font-size: 30rpx;
    font-weight: bold;
    color: #737373;
  }
}

page {
  background: $uni-bg-color-grey;
}
</style>
